<template>
    <el-main >
        <!-- 搜索栏 -->
         <el-form :model="searchParm"  :inline="true" size="default" >
            <el-form-item >
                <el-input placeholder="请输入公告标题" v-model="searchParm.noticeTitle"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="searchBtn">搜索</el-button>
                <el-button icon="Close" @click="resetBtn">重置</el-button>
                <el-button  icon="Plus" type="primary" @click="addBtn">新增</el-button>
            </el-form-item>
         </el-form>
         <!-- 表格 -->
          <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column prop="noticeTitle" label="公告标题"></el-table-column>
            <el-table-column prop="noticeText" label="公告内容"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column  label="操作" align="center" width="320px">
                <template #default="scope" >
                    <el-button  type="primary" icon="Edit" size="default" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button  type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row.noticeId)">删除</el-button>
                </template> 
            </el-table-column>
          </el-table>
          <!-- 分页 -->
       <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="searchParm.currentPage"
        :page-sizes="[10 ,20, 40, 80, 100]"
        :page-size="searchParm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchParm.total" background>
        
       </el-pagination>
         <!-- 新增编辑 -->
          <SysDialog
          :title="dialog.title"
          :width="dialog.width"
          :height="dialog.height"
          :visible="dialog.visible"
          @on-close="onClose"
          @on-confirm="commit"
          >
            <template v-slot:content>
                <el-form 
                :model="addModel" 
                ref="addForm" 
                :rules="rules"
                label-width="85px"  
                :inline="false" 
                size="default">
                            <el-form-item prop="noticeTitle" label="公告名称" >
                                <el-input v-model="addModel.noticeTitle" ></el-input>
                            </el-form-item>
                            <el-form-item prop="noticeText"  label="公告内容" >
                                <el-input :rows="6" type="textarea" v-model="addModel.noticeText" ></el-input>
                            </el-form-item>
                </el-form>
            </template>
          </SysDialog>
         
    </el-main>
    
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue';
import SysDialog from '../../components/SysDialog.vue';
import useDialog from '../../hooks/useDialog';
import { ElMessage, type FormInstance } from 'element-plus';
import { onMounted } from 'vue';
import { addApi, getListApi,deleteApi, editApi } from '../../api/notice/index';
import  {type NoticeModel} from '../../api/notice/NoticeModel';
import { nextTick } from 'vue';
import useInstance from '../../hooks/useInstance';
//获取全局的global
const {global} = useInstance()
//表格高度
const tableHeight = ref(0)
//弹框属性
const {dialog,onClose,onShow} =useDialog();
//搜索栏绑定对象
const searchParm = reactive({
    noticeTitle:'',
    currentPage:1,
    pageSize:10,
    total:0,
});
//表单对象
const addModel = reactive({
    noticeId:'',
    noticeTitle:'',
    noticeText:'',
    createTime:'',
})
//表单ref属性
const addForm = ref<FormInstance>()
//表单规则
const rules =reactive({
    noticeTitle:[
        {
            required:true,
            message:"请输入公告标题",
            trigger:"change",
        }],
    noticeText:[
        {
            required:true,
            message:"请输入公告内容",
            trigger:"change",
        }]
})

const tableList = ref([])
//列表
const getList = async()=>{
    let res = await getListApi(searchParm)
    if(res && res.code == 200){
        tableList.value = res.data.records;
        searchParm.total = res.data.total;
    }
}
const searchBtn = () =>{
    getList()
}
const resetBtn = () =>{
    searchParm.noticeTitle = ''
    searchParm.currentPage = 1
    getList()
}
//页数改变时
const sizeChange = (size:number)=>{
    searchParm.pageSize = size;
    getList()
}
//页数改变时触发
const currentChange =(page:number)=>{
    searchParm.currentPage = page;
    getList()

}

const tags = ref('')
//新增按钮
const addBtn = () =>{
    tags.value = '0'
    dialog.title = '新增';
    dialog.height = 210;
    onShow();
 //清空表单
 addForm.value?.resetFields()
 
}
//编辑
const editBtn = async(row:NoticeModel) =>{
    
    tags.value = '1'
    dialog.title = '新增';
    dialog.height = 210;
 onShow();
 nextTick(()=>{
    //数据回显
    Object.assign(addModel,row)
    // addModel.deptId = roleIds.value
 })
 
 //清空表单
 addForm.value?.resetFields()
}

//删除
const deleteBtn=async(noticeId:string)=>{
  console.log(global)
  const confirm = await global.$myconfirm('是否要删除该公告')
  console.log(confirm)
  if(confirm){
    
    let res = await deleteApi(noticeId)
    if(res && res.code == 200){
        ElMessage.success(res.msg)
        //刷新列表
        getList()
    }
    
  }
}
//提交表单
const commit = () => {
  //验证表单
  addForm.value?.validate(async(valid)=>{
    if(valid){
        console.log('验证通过')
        let res = null
        if(tags.value == '0'){
            res = await addApi(addModel)
        }else{
            res = await editApi(addModel)
        }

        if(res && res.code == 200){
            ElMessage.success(res.msg)
            onClose()
        }
        getList()
    }
  })
}


onMounted(()=>{
//
getList();
nextTick(()=>{
tableHeight.value = window.innerHeight - 230
});
}
)
</script>

<style lang="scss" scoped>

</style>